HTML5 video embedding (Displaying videos in Google Reader & Safari on iPhone)

Hey akolade,

Thanks for this, haven't seen it myself. I'll take a look and maybe we can add this in for all codecs.

Did this ever get implemented in the current module?

No, it's not been tested yet for all codecs. I'd be happy to have someone test and report, with a patch.

This is actually a serious issue in my opinion as it blocks both iPhone traffic and Google Reader traffic. I also did not test this with other codecs but the $video array provides a method to apply the code ONLY to youtube videos.

This was the code I added right before the closing

tag:

  if ($video['codec']['name'] == 'YouTube') {
    $output .= '<param name="allowscriptaccess" value="always"></param>';
    $output .= '<embed src="' . $video['source'] . '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' . $video['width'] . '" height="' .$video['height']. '"></embed>';
  }

Please note I added an additional param tag as well.

Marked #554544: YouTube video not showing up in Google Reader and #294024: video not showing in rss feed when using video filter as duplicates

I wouldn't call this critical as the videos do show up on your website, although not with every client.

I'm not happy with adding codec specific code in the output function, so I'll need to check if this can be made into more generic code that every codec that needs it could use.

You can always use the theme function to override the output, to add kmontys fix.

This is definitely critical because many multimedia blogs that use this module (such as mine) are primarily read through RSS readers and not the website.

I fully understand that this is a serious issue.

I'm not happy with adding the embed code though, since it's:

1 - proprietary
2 - non valid xhtml

Also, adding the embed code doesn't make all codecs work with Google reader. It seems they have support for some sites, but not all. I haven't had a chance to look in the iPhone yet.

The right way to handle this might be using Javascript to embed, like SWFobject. I'm not sure.

Better title.

I'd like to point out that we're mimicking *exactly* what YouTube gives you, by default, when you copy and paste the provided embed code. I think that invalidates 1 + 2, as that is the standard the iPhone + Reader will use. They are not going to pay attention to what this module would like to do.

Also, for what it is worth, Reader does not support all embeddable code (I know Xtranormal is denied), so a global solution is impossible.

Personally, I agree with blackdog that adding embed isn't the best approach. Some of us go to great lengths to use valid XHTML, which that would break.

I like the approach described at LearningTheWorld.eu, which adds a link and an image if the flash object can't be loaded. This also has the advantage of helping out those users who don't have flash installed, too.

On my site, I added another callback to the YouTube codec:

function video_filter_codec_info() {
...
  $codecs['youtube'] = array(
    'name' => t('YouTube'),
    'sample_url' => 'http://www.youtube.com/watch?v=uN1qUeId',
    'callback' => 'video_filter_youtube',
    'regexp' => '/youtube\.com\/watch\?v=([a-z0-9\-_]+)/i',
    'ratio' => 425 / 355,
    'fallback' => 'video_fallback_youtube',
  );
...

function video_fallback_youtube($video) {
	$fallback = '<a href="' . $video['source'] . '">';
	$fallback .= '<img alt="Click to play this YouTube video." src="http://img.youtube.com/vi/' . $video['codec']['matches'][1] . '/0.jpg" width="' . $video['width'] . '" height="' . $video['height'] . '" />';
	$fallback .= '</a>';
	
	return $fallback;
}

And then in theme_video_filter_flash, I added

function theme_video_filter_flash($video, $params) {
...
  if(isset($video['codec']['fallback'])) {
  	$output .= $video['codec']['fallback']($video);
  }
  $output .= '</object>'."\n";
...

just before the OBJECT tag is closed. This has the advantage of being easily customizable on a per-codec basis, and we can add fallbacks for each codec as they're discovered. Users who prefer the embed approach can easily override the fallback module if they chose, or it could even be made a configurable option.

Thoughts?

Eventually, I hope that we can use HTML5 video as the primary option, falling back to flash and finally a static image as needed, but that's a ways off.

On the vimeo front, this tutorial describes how to embed HTML5-compatible code for iphones and ipads:

http://t3chh3lp.com/blog/how-to-vimeo-embed-videos-working-on-ipad.html

The issue is you need to have a Vimeo Plus account to use, and that HTML5 compatibility shouldn't be assumed to be ONLY ipad and iphones...

On a related note, I'd be surprised if video content websites embrace HTML5 due to the issues mentioned here: http://en.wikipedia.org/wiki/HTML5_video#Usage

It seems the only way forward for people wishing to embed HTML5 video is to upload it to your OWN website (in FLV or H.264 format) and use flowplayer etc to display it.

Following up on my previous comments, I think a small rewrite of this module to allow non-flash insertion of video content should be considered.

I notice Vimeo is allowing you to embed HTML5 via an IFRAME (for Vimeo Plus members) and I'm sure other operators are currently (or going to) support other methods of embedding video other than the <object> tag - ie <video>.

is the answer an 'html5' callback?

  $codecs['vimeo'] = array(
    'name' => t('Vimeo'),
    'sample_url' => 'http://www.vimeo.com/123456',
    'callback' => 'video_filter_vimeo',
    'regexp' => '/vimeo\.com\/([0-9]+)/',
    'ratio' => 16 / 9,
    'control_bar_height' => 0,
    'html5_callback' => 'video_filter_vimeo_html5',
  );

function video_filter_vimeo_html5($video) {
  $html = '<iframe src="http://player.vimeo.com/video/'.$video['codec']['matches'][1].'?title=0&byline=0&portrait=0&color=80ceff" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0"></iframe>';

  return $html;
}

I like both ideas; Adding a fallback for clients that can't play, and HTML5 support. We need to think about the logic in the theme function also, so things are printed in the right order.

I've just realised the emfield module (http://drupal.org/project/emfield) provides HTML5-compatible YouTube and Vimeo embedding both inline (input filter) and via CCK fields...

Here's a patch that implements the ideas that @sydneyshan showed in #14.

I have just finished testing the above html5 patch with some youtube videos and the results are mixed.

Certain youtube videos which used to work have now stopped working for example:
OLD Flash only URL:
http://www.youtube.com/v/gq7OTtDlN0s
New HTML5 code iframe URL:
http://www.youtube.com/embed?v=gq7OTtDlN0s

To get the best of both worlds would it be possible to have some JS flash detection code and switch between the youtube embedding methods depending on the browsers ability to play flash or not?

If we use an iframe, the device ability detection is done by the video provider, so we don't have to.

OLD Flash only URL:
http://www.youtube.com/v/gq7OTtDlN0s
New HTML5 code iframe URL:
http://www.youtube.com/embed?v=gq7OTtDlN0s

The new iframe URL looks like this: http://www.youtube.com/embed/gq7OTtDlN0s and works just fine.

I've committed the patch in #17 to both 6.x & 7.x, and will put out another beta for people to test, since this issue isn't getting alot of feedback.